<template>
	<view class="main">
		<view class="card">
			<view class="card-tit flex align"><text></text>个人信息</view>
			<view class="input-item flex align">
				<view>姓名</view>
				<input placeholder="输入姓名" v-model="realname" />
			</view>
			<view class="input-item flex align" @click="toShow()">
				<view>性别</view>
				<view :style="sex==''?'color:grey':''">{{sex==''?'点击选择':sexText}}</view>
				<!-- <input placeholder="点击选择" v-model="sex" disabled/> -->
			</view>
			<view class="input-item flex align">
				<view>联系电话</view>
				<input placeholder="输入联系电话" v-model="mobile" />
			</view>
			<view class="input-item flex align">
				<view>所属地区</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker :clear-icon="false" :localdata="items" popup-title="请所在区域"
						@change="onchange"></uni-data-picker>
				</view>
				<!-- <input placeholder="选择所属地区" /> -->
			</view>
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>账号信息</view>
			<view class="input-item flex align">
				<view>账号</view>
				<input placeholder="设置账号" v-model="username" />
			</view>
			<view class="input-item flex align">
				<view>密码</view>
				<input placeholder="设置密码" v-model="password" />
			</view>
			<!-- <view class="input-item flex align">
				<view>再次输入密码</view>
				<input placeholder="填写密码" v-model="password2" />
			</view> -->
		</view>
		<view class="resign-btn" @click="toResign()">注册</view>
		<!-- 性别 -->
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
	</view>
</template>

<script>
	import {
		regionLists,
		userRegister
	} from '@/api/apiData.js';
	import {
		uploadOss
	} from '@/utils/oss/oss.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				imageValue: [],
				logo: '',
				business_license: '',
				items: [],
				region: [],
				date: '',
				realname: '',
				money: '',
				address: '',
				juridical_person: '',
				telphone: '',
				area: '',
				username: '',
				password: '',
				role_id: '',
				role_S: false,
				mobile: '',
				sex: '',
				show: false,
				columns: [
					['男', '女']
				],
				sexText:''
			};
		},
		onLoad() {
			this.getRegion()
			// this.judge();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			// let type = uni.getStorageSync('type')
			// if (type == 1) { //判断是否为公司账号
			// 	// this.checkToken()
			// 	this.getInfo()
			// } else {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login?type=1'
			// 	})
			// }
		},
		methods: {
			toShow(){
				this.show = true
				console.log(666)
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.sexText = e.value[0]
				if(e.value[0]=='男'){
					this.sex = 1
				}else{
					this.sex = 2
				}
				this.show = false
			},
			toback() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			xieyi() {
				uni.navigateTo({
					url: '/pages/xieyi/register_info'
				});
			},
			yinsi() {
				uni.navigateTo({
					url: '/pages/xieyi/private_policy'
				});
			},
			// 初始化的时候调用参数，判断用户是否第一次进入
			judge() {
				uni.getStorage({
					key: 'agreement_key',
					success: () => {
						// 获取到了不显示弹窗
						this.$refs.alertDialog.close();
					},
					fail: () => {
						this.$refs.alertDialog.open()
					}
				})
			},
			// 同意按钮
			admit() {
				try {
					uni.setStorageSync('agreement_key', 'yes');
					uni.setStorageSync('agreement_Date', new Date().toLocaleString())
				} catch (e) {
					//TODO handle the exception
				}
				this.$refs.alertDialog.close();
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			async getRegion() {
				const result = await regionLists()
				result.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					item.children.forEach(item2 => {
						item2.text = item2.name
						item2.value = item2.id
						if (item2.children.length > 0) {
							item2.children.forEach(item3 => {
								item3.text = item3.name
								item3.value = item3.id
							})
						}
					})
				})
				this.items = result.data
			},
			onchange(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.region = arr
			},
			toUpload() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async (res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let ossPath = await uploadOss({
							filePathFore: 'img/',
							filePath: res.tempFilePaths[0],
						})
						that.logo = 'https://drxt.oss-cn-shanghai.aliyuncs.com/' + ossPath
					}
				})
			},
			toUpload2() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async (res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let ossPath = await uploadOss({
							filePathFore: 'img/',
							filePath: res.tempFilePaths[0],
						})
						that.business_license = 'https://drxt.oss-cn-shanghai.aliyuncs.com/' + ossPath
					}
				})
			},
			async checkToken() {
				const result = await checkToken2()
				if (result.code == 1) {

				} else {
					uni.navigateTo({
						url: '/pages/login/login?type=1'
					})
				}
			},
			deletes(e) {
				const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
				this.imageValue.splice(num, 1);
			},
			// 入驻
			async toResign() {
				let obj = {
					realname: this.realname,
					sex: this.sex,
					mobile: this.mobile,
					out_region: this.region,
					username: this.username,
					password: this.password,
				}
				if (obj.realname == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return false
				}
				if (obj.sex == '') {
					uni.showToast({
						title: '请选择性别',
						icon: 'error'
					})
					return false
				}
				if (obj.mobile == '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'error'
					})
					return false
				}
				if (obj.out_region.length == 0) {
					uni.showToast({
						title: '请选择所属地区',
						icon: 'error'
					})
					return false
				}
				if (obj.username == '') {
					uni.showToast({
						title: '请输入账号',
						icon: 'error'
					})
					return false
				}
				if (obj.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'error'
					})
					return false
				}
				console.log(obj)
				
				const result = await userRegister(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async getInfo() {
				const result = await companyInfo()
				if (result.code == 1) {
					this.role_id = result.data.role_id
					let arr = result.data.permission_list
					if (arr.length != 0) {
						arr.forEach(item => {
							if (item.permission_mark == 'storeManage') {
								this.role_S = true
							}
						})
					}

				} else {

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		/* line-height: 18px; */
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		vertical-align: middle;
		font-weight: normal
	}

	.agreement-view {
		margin-top: 20px;
		box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
		border-radius: 20rpx;
		padding: 20rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		width: 300px;
		height: 200rpx;
		align-items: center;
		/* justify-content: center; */
		background-color: #fff;
	}

	.u-text-center {
		font-size: 15px;
		padding-bottom: 20rpx;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 600;
		width: 100%;
		height: 30px;
		text-align: center;
	}

	.agreement-content {
		overflow-y: scroll;
		padding: 0rpx 40rpx 10rpx 40rpx;
	}

	.agreement-btns {
		width: 100%;
		/* height: 85rpx; */
		display: flex;
		flex-direction: row;
	}

	.yse-btn {
		color: #fff;
		background-color: red;
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 20rpx 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.no-btn {
		/* background-color: aquamarine; */
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 0 20rpx;
	}

	.text {
		line-height: 46px;
	}

	.main {
		margin: 24rpx;
		padding-bottom: 100rpx;

		.card {
			border-radius: 12rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			padding: 30rpx 24rpx;
			background: white;
			margin-bottom: 30rpx;

			.loadUp {
				background: #D9D9D9;
				border-radius: 12rpx;
				width: fit-content;
				padding: 43rpx;
				margin-top: 20rpx;
			}

			.logo {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.card-tit {
				font-size: 32rpx;
				font-weight: bold;

				text {
					background: #FF6543;
					display: block;
					width: 5rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;

				view {
					width: 30%;
				}

				.address {
					view {
						width: 100%;
					}
				}
			}
		}

		.resign-btn {
			background: #C23015;
			border-radius: 32rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: white;
			padding: 17rpx 0;
			margin: 80rpx auto;
			text-align: center;
		}
	}
</style>